module Svg.Styled.Keyed exposing
    ( node
    , lazyNode, lazyNode2, lazyNode3, lazyNode4, lazyNode5, lazyNode6
    )

{-| A keyed node helps optimize cases where children are getting added, moved,
removed, etc. Common examples include:

  - The user can delete items from a list.
  - The user can create new items in a list.
  - You can sort a list based on name or date or whatever.

When you use a keyed node, every child is paired with a string identifier. This
makes it possible for the underlying diffing algorithm to reuse nodes more
efficiently.


# Keyed Nodes

@docs node


# Keyed Nodes with Lazy Children

@docs lazyNode, lazyNode2, lazyNode3, lazyNode4, lazyNode5, lazyNode6

-}

import Svg.Styled exposing (Attribute, Svg)
import VirtualDom.Styled


{-| Works just like `Svg.node`, but you add a unique identifier to each child
node. You want this when you have a list of nodes that is changing: adding
nodes, removing nodes, etc. In these cases, the unique identifiers help make
the DOM modifications more efficient.
-}
node : String -> List (Attribute msg) -> List ( String, Svg msg ) -> Svg msg
node name =
    VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" name


{-| Creates a node that has children that are both keyed **and** lazy.

The unique key for each child serves double duty:

  - The key helps the Elm runtime make DOM modifications more efficient
  - The key becomes the id of child and the css generated by lazy becomes scoped to that id allowing the browser to save time calculating styles

Some notes about using this function:

  - The key must be a valid HTML id
  - The key should be unique among other ids on the page and unique among the keys for other siblings
  - No other id attributes should be specified on the keyed child nodes - they will be ignored

-}
lazyNode :
    String
    -> List (Attribute msg)
    -> (a -> Svg msg)
    -> List ( String, a )
    -> Svg msg
lazyNode nodeType properties =
    VirtualDom.Styled.keyedLazyNode (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)


{-| Same as `lazyNode`, but checks on 2 arguments.
-}
lazyNode2 :
    String
    -> List (Attribute msg)
    -> (a -> b -> Svg msg)
    -> List ( String, ( a, b ) )
    -> Svg msg
lazyNode2 nodeType properties =
    VirtualDom.Styled.keyedLazyNode2 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)


{-| Same as `lazyNode`, but checks on 3 arguments.
-}
lazyNode3 :
    String
    -> List (Attribute msg)
    -> (a -> b -> c -> Svg msg)
    -> List ( String, ( a, b, c ) )
    -> Svg msg
lazyNode3 nodeType properties =
    VirtualDom.Styled.keyedLazyNode3 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)


{-| Same as `lazyNode`, but checks on 4 arguments.
-}
lazyNode4 :
    String
    -> List (Attribute msg)
    -> (a -> b -> c -> d -> Svg msg)
    -> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d } )
    -> Svg msg
lazyNode4 nodeType properties =
    VirtualDom.Styled.keyedLazyNode4 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)


{-| Same as `lazyNode`, but checks on 5 arguments.
-}
lazyNode5 :
    String
    -> List (Attribute msg)
    -> (a -> b -> c -> d -> e -> Svg msg)
    -> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d, arg5 : e } )
    -> Svg msg
lazyNode5 nodeType properties =
    VirtualDom.Styled.keyedLazyNode5 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)


{-| Same as `lazyNode`, but checks on 6 arguments.
-}
lazyNode6 :
    String
    -> List (Attribute msg)
    -> (a -> b -> c -> d -> e -> f -> Svg msg)
    -> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d, arg5 : e, arg6 : f } )
    -> Svg msg
lazyNode6 nodeType properties =
    VirtualDom.Styled.keyedLazyNode6 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)
